<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #sidebar1 {
            /* 确定容器最佳呈现宽度 */
            width: 200px;
            box-sizing: border-box;
        }
        #sidebar1 > ul {
            /* 取消内边距，使li横向撑满ul */
            padding: 0;
            background: #f1f1f1;
            list-style: none;
        }
        #sidebar1 a {
            /* 使超链接撑满li */
            display: block;
            /* 撑开li */
            padding: 8px 15px;
            color: #000;
            text-decoration: none;
        }

        #sidebar1 a:hover {
            background-color: #555;
            color: white;
        }

        /* ------------------------ */
        #sidebar2 {
            /* 容器宽度 */
            width: 200px;
            box-sizing: border-box;
        }
        #sidebar2 h2 {
            /* 取消标题默认的外边距，否则无法与列表完全贴上 */
            margin: 0;
        }
        #sidebar2 > h2 > a {
            display: block;
            background: #3185bf;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
        }
        #sidebar2 ul {
            /* 取消默认外边距 */
            margin: 0;
            padding: 0;
            background: #f1f1f1;
            list-style: none;
        }
        #sidebar2 li a {
            display: block;
            padding: 8px 15px;
            color: #000;
            text-decoration: none;
        }
        #sidebar2 li a:hover {
            background: #03a9f4;
            color: white;
        }

        /* ------------上导航---------- */
        #navbar1 ul {
            /* li撑满ul */
            padding: 0;
            background: #333;
        }
        #navbar1 li {
            /* 使列表inline横向排列，且内部按block撑满高度 */
            display: inline-block;
        }
        #navbar1 a {
            /* 撑满li */
            display: block;
            color: white;
            padding: 14px 16px;
            text-decoration: none;
        }
        #navbar1 a:hover {
            background-color: #111;
        }

    </style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<div id="sidebar1">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>
<hr>
<div id="sidebar2">
    <h2><a href="">云技术管理</a></h2>
    <ul>
        <li><a href="#">云服务器</a></li>
        <li><a href="#">云数据库</a></li>
        <li><a href="#">负载均衡</a></li>
    </ul>
</div>
<hr>
<h2>Horizontal Navigation Bar</h2>
<p>将li声明为inline-block，使列表横向布局。使用flex布局，可将最后一项推到右侧</p>
<div id="navbar1">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>
</body>
</html>